﻿@{
    ViewData["Title"] = "SMTP设置";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>@ViewData["Title"]</h1>

<div id="pageContainer">
    <el-row>
        <el-button type="danger" size="mini" icon="el-icon-search" round @@click="refresh">刷新</el-button>
        <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" round @@click="add(true)">新增</el-button>
    </el-row>


    <!--设置Table-->
    <el-row v-loading="loading">
        <el-table :data="tableData" border height="760" stripe>
            <el-table-column prop="id" label="编号"></el-table-column>



            <el-table-column prop="name" label="实例名称"></el-table-column>
            <el-table-column prop="server" label="server"></el-table-column>
            <el-table-column prop="authentication" label="authentication">
                <template slot-scope="scope">
                    {{scope.row.authentication?"是":"否"}}
                </template>

            </el-table-column>
            <el-table-column prop="name" label="name"></el-table-column>
            <el-table-column prop="user" label="user"></el-table-column>
            <el-table-column prop="password" label="password">
                <template slot-scope="scope">
                    加密了 XXXXX
                </template>

            </el-table-column>
            <el-table-column prop="port" label="port"></el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">

                    <div>
                        <i class="el-icon-edit icon-medium cl-link pointer" title="编辑" @@click="update(scope.row)"></i>
                    </div>
                </template>

            </el-table-column>
        </el-table>
    </el-row>

    <el-row>
        <el-pagination v-if="page.totalCount>0" background :page-size="page.pageSize"
                       :pager-count="15"
                       :current-page.sync="page.pageIndex"
                       @@current-change="queryData"
                       layout="prev, pager, next,total"
                       :total="page.totalCount">
        </el-pagination>
    </el-row>


</div>




<div>

</div>





<div id="editTemplate">
    <el-row>
        <!--弹出框  邮件模板-->
        <el-dialog :visible.sync="isShow" width="50%">

            <div slot="title">
                <span class="el-dialog__title"> {{title}}数据库实例</span>   <i class="cl-info"></i>
                <el-row style=" border-bottom: 1px solid #ebebeb;"></el-row>
            </div>
            <el-form label-width="120px">


                <el-form-item label="Smtp服务器">
                    <el-input size="small" v-model="form.server"></el-input>
                </el-form-item>



                <el-form-item label="Smtp 端口">
                    <el-input size="small"  v-model="form.port" ></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input size="small" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱账号">
                    <el-input size="small" v-model="form.user"></el-input>
                </el-form-item>
                <el-form-item label="邮箱密码">
                    <el-input size="small" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <strong>提示</strong> 不要轻易改密码，保存时请重填 邮箱密码
                </el-form-item>
                <el-form-item label="验证">
                    <el-switch v-model="form.authentication" active-text="是" inactive-text="否"></el-switch>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-row style=" border-bottom: 1px solid #ebebeb;"></el-row>
                <el-button size="small" round @@click="saveChange">确定</el-button>
                <el-button size="small" round @@click="isShow=false">关闭</el-button>
            </div>


        </el-dialog>
        <!--弹出框end-->
    </el-row>

</div>

@section styles{
    <style type="text/css">
    </style>
}
@section scripts{

    <script src="~/api/data/GetMetaDataSQlInstanceAll" type="text/javascript"></script>
    <script src="~/api/data/GetMetaDataMailSender" type="text/javascript"></script>

    <script>
        //{"id":1,"server":"smtp.kede.com","authentication":true,"user":"wangjunyang@kede.com","name":"大数据组","password":"wpj19900210","port":25}

        var editData = new Vue({
            el: "#editTemplate",
            data: {
                isShow: false,
                title: "编辑",

                form: {
                    server: "",
                    authentication: true,
                    name: "",
                    id: 0,
                    user: "",
                    password: "",
                    port: 25

                }
            },
            watch: {


            },
            mounted() {

            },
            methods: {
                reset: function () {
                    this.form.server = "";
                    this.form.authentication = true;
                    this.form.name = "";
                    this.form.id = 0;
                    this.form.user = "";
                    this.form.password = "";
                    this.form.port = 25;
                },
                print: function (centent) {
                    console.log("数据测试:" + centent + "  Time:" + new Date());
                },
                saveChange: function () {

                    this.form.port = parseInt(this.form.port);
                    let data = JSON.parse(JSON.stringify(this.form));
                    axios.post("/api/Data/UpdatEmailSender", data).then(function (result) {
                        if (result.data.isSuccess) {
                            pageVue.Tips("更新完成");
                            setTimeout(function () { window.location.reload(); }, 500);

                        }


                    });
                    console.log("修改数据  ");




                }
            }

        });


        var pageVue = new Vue({
            el: '#pageContainer',
            data: {
                loading: false,

                filterparam: {
                    name: "",
                    dbtype: 1
                },

                tableData: [],
                page: { pageIndex: 1, pageSize: 20, totalCount: 0 }


            },
            methods: {
                refresh: function (event) {
                    window.location.reload();
                },
                /*搜索数据*/
                search: function () {
                    this.page.pageIndex = 1;
                    this.queryData();

                },
                clearData: function () {

                },
                queryData: function () {
                    let query = JSON.parse(JSON.stringify(this.filterparam));

                    query.pageindex = this.page.pageIndex;
                    query.pagesize = this.page.pageSize;
                    this.loading = true;
                    axios.get("/api/Data/FindMailSenderByPages", {
                        params: query
                    }).then(function (result) {
                        pageVue.loading = false;
                        pageVue.filltable(result);
                        console.log(result);
                    })
                        .catch(function (error) {
                            console.log(error);
                        });


                },
                filltable: function (result) {
                    this.tableData = result.data.lists;
                    this.page.totalCount = result.data.page.totalCount;
                },
                Tips: function (centent, type) {
                    type = type || "info";
                    this.$message({
                        message: centent,
                        type: type
                    });
                },
                array2Str(_arrys, _separats) {
                    let _data = _arrys || [];
                    return _data.join(_separats);
                },
                update: function (data) {
                    editData.title = "编辑";
                    editData.form = JSON.parse(JSON.stringify(data));
                    editData.isShow = true;

                },
                add: function () {
                    editData.reset();
                    editData.title = "新增";
                    editData.isShow = true;
                }
            }
        });
        pageVue.search();
    </script>
}

